/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Cell, Table, TableBody, TableRow, Text,} from "customize-easy-ui-component";
import {检验设备结论} from "./viewRes";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";
import {config设备概况, config适装} from "./orcBase";
import {RepLink} from "../../common/base";
import {useRep2hTableViewer} from "../../hook/useRepTableEditor";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

export const 检验结论报告= ({ orc, rep,theme } : { orc: any, rep: any,theme:any}
) => {
  const [firstNode,_S]=useThreeColumnView({orc, config:config设备概况,slash:true,});
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
      <Text id={'Conclusion'} variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>检验结论报告</Text>
      <Text css={{display: 'flex',flexDirection: 'row-reverse',marginRight: '2rem'
      }}>报告编号：{rep.isp?.no}</Text>
    </div>
    <Table fixed={ ["13.9%","25%","11%","20%","11%","%"]  } css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}} }  tight  miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={'MaterialReview'}>
          {firstNode}
          <TableRow >
            <Cell>检验依据</Cell>
            <Cell colSpan={5}>
              1．GB18564.1-2019《道路运输液体危险货物罐式车辆第1部分：金属常压罐体技术要求》<br/>
              2．交运发【2021】35号、《常压液体危险货物罐车治理罐体定期检验工作指南》
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    {检验设备结论({theme, orc, rep})}
    <Text css={{fontSize:'0.7rem'}}>
      注1：检验报告中，“√”——表示该检验项目的单项结论为“符合要求”或“合格”；“○” ——表示该检验项目存在一般问
      题；“×” ——表示该检验项目存在严重问题，单项结论为“不符合要求”或“不合格”；“△” ——表示该检验项目本次“无
      法检验”；“－”、“/” ——表示该检验项目在本设备上“无此项”；凡是检验报告中以“×”或“△”符号表示的，必须在相应
      栏中作详细说明。
    </Text>
  </>;
};


export const 适装介质列表= ({theme, orc, rep} :{theme: any, orc:any, rep:any}
) => {
  const [renderRows,headRows]=useRep2hTableViewer(config适装, '适装表', orc,false,true,true,'序号');
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
      <Text id='AdaptingMedium' variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>适装介质列表</Text>
      <div css={{
        display: 'flex',
        justifyContent: 'space-between'
      }}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>

    <Table  fixed={ [ "%"] }  tight  miniw={800}
                   css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'} }} >
      <TableBody>
          <TableRow>
            <Cell>
              <Text css={{textIndent: '2.2rem', display: 'flex',fontSize:'1.1rem'}}>
              经技术审查，核定&nbsp; {orc.上路号牌 || '／'} &nbsp;罐车的适装介质见下表，使用单位应按照相关法规标准及制造单位确定的技术要求（温度、浓度、最大充装容积等限制条件）装运适装介质。
              </Text>
            </Cell>
          </TableRow>
      </TableBody>
    </Table>
    <Table  fixed={ ["5%","45%","5%","%"] }  tight  miniw={800} css={ {borderCollapse: 'collapse', }} >
      <TableBody>
        {headRows}
        <RepLink rep={rep} tag={'AdaptingMedium'}>
          {renderRows}
        </RepLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} />
  </>;
};
